import {Button, Drawer, Form, Input, message, Space} from "antd";
import React, {useEffect, useState} from "react";
import {ImageSetTagDrawerProp} from "@/pages/docker/modules";
import {imagesSetTags} from "@/api/docker";

const ImagesSetTag: React.FC<ImageSetTagDrawerProp> = ({visible, target, close}) => {

    const [form] = Form.useForm<{key: string; value: string}>();

    const submitForm = async () => {
        form.validateFields().then( async value => {
            await imagesSetTags({imageId: target?.id!, tag: `${value.key}:${value.value && value.value !== '' ? value.value : 'latest'}`});
            message.success('设置标签成功')
            close(true);
        })
    }

    useEffect(() => {
        return () => {
            form.resetFields()
        }
    }, [])

    return <Drawer
        width={350}
        title="设置标签"
        placement="right"
        onClose={() => close(false)}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={()=> close(false)}>取消</Button>
                <Button type="primary" onClick={() => submitForm()}>保存</Button>
            </Space>
        }
    >
        <Form labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              form={form}
              layout="horizontal"
              name="form_in_modal"
        >
            <Form.Item name="key" label="Key" rules={[{ required: true, message: '请输入角色名称' }]}>
                <Input placeholder="输入Tag的key值" />
            </Form.Item>
            <Form.Item name="value" label="Value">
                <Input placeholder="输入Tag的value值" />
            </Form.Item>
        </Form>

    </Drawer>
}

export default ImagesSetTag;